<template>
	<div class="report-page" style="padding: 20px">
		<div class="toolbar">
			<el-radio-group v-model="activeType" size="small">
				<el-radio-button label="电" />
				<el-radio-button label="水" />
				<el-radio-button label="气" />
			</el-radio-group>

			<el-select v-model="selectedMonth" placeholder="选择月份" size="small" style="margin-left: 10px">
				<el-option v-for="m in [1, 2, 3]" :key="m" :label="m + ' 月'" :value="m" />
			</el-select>

			<el-button type="primary" size="small" style="margin-left: auto" @click="exportExcel">导出 Excel</el-button>
			<el-button type="success" size="small" @click="exportImage">导出图片</el-button>
		</div>

		<v-chart ref="chartRef" :option="chartOptions" style="height: calc(100vh - 160px);" />
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import VChart from 'vue-echarts'
import html2canvas from 'html2canvas'
import * as XLSX from 'xlsx'
import { ElMessage } from 'element-plus'

const chartRef = ref(null)
const activeType = ref('电')
const selectedMonth = ref(1)

function getDays(month) {
	// 假设今年是平年（非闰年）
	return [31, 28, 31][month - 1]
}

// 模拟每日数据：电/水/气 每月每日用量
const mockData = {
	电: {
		1: Array.from({ length: 31 }, (_, i) => 600 + i * 3),
		2: Array.from({ length: 28 }, (_, i) => 550 + i * 2),
		3: Array.from({ length: 31 }, (_, i) => 580 + i * 4)
	},
	水: {
		1: Array.from({ length: 31 }, (_, i) => 300 + i * 2),
		2: Array.from({ length: 28 }, (_, i) => 280 + i * 1.5),
		3: Array.from({ length: 31 }, (_, i) => 310 + i * 2.5)
	},
	气: {
		1: Array.from({ length: 31 }, (_, i) => 180 + i * 1.2),
		2: Array.from({ length: 28 }, (_, i) => 170 + i * 1.1),
		3: Array.from({ length: 31 }, (_, i) => 190 + i * 1.3)
	}
}

const chartOptions = computed(() => {
	const days = getDays(selectedMonth.value)
	const xAxis = Array.from({ length: days }, (_, i) => `${i + 1}日`)
	const data = mockData[activeType.value][selectedMonth.value]

	return {
		title: {
			text: `${selectedMonth.value} 月每日 ${activeType.value} 用量趋势`,
			left: 'center'
		},
		tooltip: {
			trigger: 'axis'
		},
		xAxis: {
			type: 'category',
			data: xAxis
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: activeType.value,
				type: 'line',
				smooth: true,
				data
			}
		]
	}
})

function exportExcel() {
	const days = getDays(selectedMonth.value)
	const data = mockData[activeType.value][selectedMonth.value]
	const rows = [['日期', '用量']]
	for (let i = 0; i < days; i++) {
		rows.push([`${selectedMonth.value}月${i + 1}日`, data[i]])
	}
	const ws = XLSX.utils.aoa_to_sheet(rows)
	const wb = XLSX.utils.book_new()
	XLSX.utils.book_append_sheet(wb, ws, '日报')
	XLSX.writeFile(wb, `报表_${activeType.value}_${selectedMonth.value}月.xlsx`)
}

function exportImage() {
	const chartEl = chartRef.value?.$el
	if (!chartEl) return
	html2canvas(chartEl).then((canvas) => {
		const link = document.createElement('a')
		link.href = canvas.toDataURL('image/png')
		link.download = `报表_${activeType.value}_${selectedMonth.value}月.png`
		link.click()
	}).catch(() => {
		ElMessage.error('导出失败')
	})
}
</script>

<style scoped>
.toolbar {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	gap: 10px;
}
</style>
